import { UserAuth } from '../../utils/hooks';
import NotAuth from '../../components/NotAuth';
import React from 'react';
import { useState, useEffect, useRef } from 'react';
import { Button, Layout, message, Modal, Table, Row, Col, Input } from 'antd';
import { Content, Header } from 'antd/lib/layout/layout';
import axios from 'axios';
import Config from '../../Config';
import InstrumentCard from '../../components/InstrumentCard';
import { useSelector } from 'react-redux';
import { selectUser } from '../../redux/Slice/userSlice';
import * as moment from 'moment';
const Examine = () => {
  const [examineData, SetExamData] = useState([]);
  const [tableLoading, SetTableLoading] = useState(true);
  const [InfoModal, SetInfoMoadl] = useState(false);
  const [curInfo, SetCurInfo] = useState({
    id: null,
    YQBH: -1,
    YQMC: '',
    type: null,
    taskId: '',
    taskName: '',
    username: '',
    time: '',
    state: null,
  });
  const [refresh, SetRefresh] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const childRef = useRef();
  let username = useSelector(selectUser);
  const ref = useRef();
  useEffect(() => {
    SetTableLoading(true);
    axios
      .get(Config.baseURL + '/instrument/allexamine')
      .then(res => {
        if (res.data.code == 1) {
          console.log(res.data.data);
          let data = res.data.data;

          let dataSource = [];
          for (let i = 0; i < data.examine.length; i++) {
            dataSource.push({
              ...data.examine[i],
              taskName: data.taskName[i],
              taskId: data.taskId[i],
            });
          }
          console.log(dataSource);
          SetExamData(dataSource);
          SetTableLoading(false);
        } else if (res.data.code >= 10000) {
          message.error(res.data.message, 2);
        }
      })
      .catch(err => {
        message.error('服务器出错，请联系管理员', 2);
        console.log(err);
      });
  }, [refresh]);

  const columns = [
    {
      title: '仪器编号',
      dataIndex: 'YQBH',
      key: 'YQBH',
    },
    {
      title: '仪器名称',
      dataIndex: 'YQMC',
      key: 'YQMC',
    },
    {
      title: '操作类型',
      dataIndex: 'type',
      key: 'type',
      filters: [
        { text: '录入', value: 1 },
        { text: '修改', value: 2 },
        { text: '删除', value: 3 },
      ],
      onFilter: (value, record) => record.type === value,
      render: (_, record) => {
        if (record.type == 1) {
          return <span>录入</span>;
        } else if (record.type == 2) {
          return <span>修改</span>;
        } else if (record.type == 3) {
          return <span>删除</span>;
        }
      },
    },
    {
      title: '录入人',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '录入时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '当前状态',
      dataIndex: 'taskName',
      key: 'taskName',
      render: (_, value) => {
        return <span style={{ color: '#FFB800' }}>{value.taskName}</span>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, value) => {
        return (
          <Button
            onClick={() => {
              console.log(value);
              SetCurInfo(value);
              SetInfoMoadl(true);
              childRef.current.SetReFresh(!childRef.current.refresh);
            }}
            type="primary"
            size="large"
          >
            详情
          </Button>
        );
      },
    },
  ];
  const Pass = () => {
    setIsLoading(true);
    axios
      .post(Config.baseURL + '/instrument/InstrumentExamine', {
        username: username,
        id: curInfo.id,
        pass: 1,
        taskId: curInfo.taskId,
        time: moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      .then(res => {
        if (res.data.code == 1) {
          message.success('审核成功', 2, () => {
            setIsLoading(false);
            SetInfoMoadl(false);
            SetRefresh(!refresh);
          });
        } else if (res.data.code >= 10000) {
          message.error('审核失败 ' + res.data.message, 2);
          setIsLoading(false);
        }
      })
      .catch(err => {
        message.error('后台出错 ' + err, 2);
        setIsLoading(false);
      });
  };
  const NotPass = () => {
    setIsLoading(true);

    axios
      .post(Config.baseURL + '/instrument/InstrumentExamine', {
        username: username,
        id: curInfo.id,
        pass: 0,
        taskId: curInfo.taskId,
        errReason: ref.current.input.value,
        time: moment().format('YYYY-MM-DD HH:mm:ss'),
      })
      .then(res => {
        if (res.data.code == 1) {
          message.success('审核成功', 2, () => {
            setIsLoading(false);
            SetInfoMoadl(false);
            SetRefresh(!refresh);
          });
        } else if (res.data.code >= 10000) {
          message.error('审核失败 ' + res.data.message, 2);
          setIsLoading(false);
        }
      })
      .catch(err => {
        message.error('后台出错 ' + err, 2);
        setIsLoading(false);
      });
  };
  const BottomView = () => {
    return (
      <>
        <Row style={{ marginTop: '20px' }}>
          <Col style={{ textAlign: 'center' }} span={8}>
            <h3 style={{ display: 'inline', fontWeight: 'bold' }}>录入人：</h3>
            {curInfo.username}
          </Col>
          <Col style={{ textAlign: 'center' }} span={8}>
            <h3 style={{ display: 'inline', fontWeight: 'bold' }}>录入时间：</h3>
            {curInfo.time}
          </Col>
        </Row>
        <Row style={{ marginTop: '20px', height: '25px' }}>
          <Col span={12}>
            <span>不通过原因：</span>
            <Input style={{ width: '300px' }} ref={ref} />
          </Col>
          <Col span={8}></Col>
          <Col style={{ textAlign: 'center' }} span={4}>
            <Button
              onClick={NotPass}
              style={{ marginRight: '15px' }}
              danger
              type="primary"
              size="large"
              loading={isLoading}
            >
              不通过
            </Button>
            <Button loading={isLoading} onClick={Pass} type="primary" size="large">
              通过
            </Button>
          </Col>
        </Row>
      </>
    );
  };
  const bottomStyle = {
    borderBottom: '2px solid #1890FF',
  };

  return (
    <>
      <Layout>
        <Header
          style={{
            borderRadius: '5px 5px 0px 0px',
            height: '40px',
            padding: '0px 15px',
            margin: '0px 0px',
            backgroundColor: 'white',
            textAlign: 'left',
            lineHeight: '40px',
          }}
        >
          <h3>仪器审核</h3>
        </Header>
        <Content style={{ padding: '10px 20px', backgroundColor: 'white' }}>
          <Table
            style={{ border: '2px solid #E6F7FF', borderRadius: '2px' }}
            loading={tableLoading}
            columns={columns}
            dataSource={examineData}
          ></Table>
        </Content>
      </Layout>
      <Modal
        title="仪器审核"
        visible={InfoModal}
        onCancel={() => {
          SetInfoMoadl(false);
        }}
        footer={null}
        width={1653}
        style={{ top: 20 }}
      >
        <Row
          style={{
            borderBottom: '3px solid #1890FF',
            height: '500px',
            overflow: 'auto',
            overflowX: 'hidden',
          }}
        >
          <Col span={24}>
            <InstrumentCard
              disable={true}
              curInfo={curInfo}
              SetCurInfo={SetCurInfo}
              ref={childRef}
            ></InstrumentCard>
          </Col>
        </Row>
        <Row style={{ marginTop: '20px' }}>
          <Col style={{ textAlign: 'center' }} span={8}>
            <h3 style={{ display: 'inline', fontWeight: 'bold' }}>录入人：</h3>
            {curInfo.username}
          </Col>
          <Col style={{ textAlign: 'center' }} span={8}>
            <h3 style={{ display: 'inline', fontWeight: 'bold' }}>录入时间：</h3>
            {curInfo.time}
          </Col>
        </Row>
        <Row style={{ marginTop: '20px', height: '25px' }}>
          <Col span={12}>
            <span>不通过原因：</span>
            <Input style={{ width: '300px' }} ref={ref} />
          </Col>
          <Col span={8}></Col>
          <Col style={{ textAlign: 'center' }} span={4}>
            <Button
              onClick={NotPass}
              style={{ marginRight: '15px' }}
              danger
              type="primary"
              size="large"
              loading={isLoading}
            >
              不通过
            </Button>
            <Button loading={isLoading} onClick={Pass} type="primary" size="large">
              通过
            </Button>
          </Col>
        </Row>
      </Modal>
    </>
  );
};
export default () => {
  const { authority } = UserAuth('Examine');
  return <>{authority ? <Examine /> : <NotAuth />}</>;
};
